<template>
	<div class="setting-user">
		<div class="setting-card">
			<div class="setting-item-title">个人寄语</div>
			<div class="setting-item-content">
				<el-input placeholder="文章页面的那句话" v-model="form.say" clearable>
				</el-input>
			</div>
		</div>
		<div class="setting-card">
			<div class="setting-item-title">网页标题</div>
			<div class="setting-item-content">
				<el-input placeholder="请输标题(Title)" v-model="form.title" clearable>
				</el-input>
			</div>
		</div>
		<div class="setting-card">
			<div class="setting-item-title">网页关键词</div>
			<div class="setting-item-content">
				<el-input placeholder="请输入关键词(Keyword)  以，隔开" v-model="form.keywords" clearable>
				</el-input>
			</div>
		</div>
		<div class="setting-card">
			<div class="setting-item-title">页面简介</div>
			<div class="setting-item-content">
				<el-input type="textarea" :rows="3" placeholder="请输入页面简介(description)" v-model="form.description" clearable>
				</el-input>
			</div>
		</div>
		<sub-foot :prompt="prompt" :loading="loading" @saveChange="save"></sub-foot>
	</div>
</template>

<script>
	import SubFoot from 'components/setting/sub-foot'
    import {mapGetters,mapMutations} from 'vuex'

	export default {
		computed:{
	        ...mapGetters([
	            'websiteSeo',
	            'userSay'
	       	])
	    },
		data() {
			return {
				prompt: '这些将在页面加载时附加 可通过网页源码查看',
				form: {
					say: '',
					title: '',
					keywords: '',
					description: '',
				},
				loading: false
			}
		},
		created() {
			this.form = {
				'say': this.userSay,
				'title': this.websiteSeo.title,
				'keywords': this.websiteSeo.keywords,
				'description': this.websiteSeo.description,
			}
		},
		methods: {
			save() {
				this.loading = true
				this.$http.post('setWebsiteSeo',this.form).then((response) => {
					this.setUserSay(this.form.say)
					this.setWebsiteSeo({
						'title': this.form.title,
						'keywords': this.form.keywords,
						'description': this.form.description,
					})
					this.loading = false
					this.$notify({
			          title: '系统设置操作成功',
			          message: '缓存将在10分钟后重新生成',
			          type: 'success'
			        })
				})
			},
			...mapMutations({
	            setUserSay: 'SET_USER_SAY',
	            setWebsiteSeo: 'SET_WEBSITE_SEO'
	        })
		},
		components: {
			SubFoot
		}
	}
</script>

<style scope>
@import '../../../static/css/simplemk.css'
</style>